<script setup lang="ts">
import type { FormRules } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'

interface Props {
  data?: Record<string, any> | never | null
  status?: string | never | null
}

const props = withDefaults(defineProps<Props>(), {
  data: null,
  status: 'add'
})

const formRef = ref()

const form = ref<Record<string, any>>({})

const rules = reactive<FormRules>({
  menuName: [{ required: true, message: '名称不能为空!', trigger: 'blur' }],
  routeName: [{ required: true, message: '路由名称不能为空!', trigger: 'blur' }],
  menuUrl: [{ required: true, message: '路由路径不能为空!', trigger: 'blur' }],
  menuComponent: [{ required: true, message: '路由组件不能为空!', trigger: 'blur' }]
})

const types = [
  {
    value: 1,
    label: '菜单'
  },
  {
    value: 3,
    label: '页面'
  },
  {
    value: 2,
    label: '按钮'
  }
]

const componentsOptions = [
  {
    value: '#',
    label: '系统布局组件'
  },
  {
    value: 'NoComponent',
    label: '无组件'
  }
]

const initForm = () => {
  form.value['menuType'] = 1
  form.value['useStatus'] = 1
  if (props.data) {
    Object.keys(props.data).forEach((key: string) => {
      form.value[key] = props.data![key]
    })
  }
}

const handleTagClick = (val: any) => {
  form.value.menuComponent = val
}

const formatForm = () => {
  const { id, menuUrl, menuName, routeName, menuType, menuComponent, menuRedirect, parentId, useStatus, menuIcon } = form.value
  const result: Record<string, any> = {
    menuName,
    menuType,
    routeName,
    useStatus
  }
  // 菜单才有的参数
  if (menuType === 1) {
    result.menuUrl = menuUrl
    result.menuComponent = menuComponent
    result.menuRedirect = menuRedirect
    result.menuIcon = menuIcon
  }
  if (props.status === 'add') {
    // 添加
    result.parentId = parentId
  } else if (props.status === 'edit') {
    // 更新
    result.menuId = id
  }
  return result
}

const submitForm = () => {
  return new Promise<any>((resolve) => {
    formRef.value.validate((valid: boolean) => {
      let res = null
      if (valid) {
        res = formatForm()
      }
      resolve(res)
    })
  })
}

defineExpose({
  submitForm
})

onMounted(() => {
  initForm()
})
</script>

<template>
  <div class="form-wrapper">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
      <el-form-item label="类型:" prop="menuType">
        <el-select v-model="form.menuType" placeholder="请选择类型">
          <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="名称:" prop="menuName">
        <el-input v-model="form.menuName" type="text" placeholder="请输入内容"> </el-input>
      </el-form-item>
      <el-form-item label="路由名称:" prop="routeName">
        <el-input v-model="form.routeName" type="text" placeholder="请输入内容"> </el-input>
      </el-form-item>
      <el-form-item v-if="form.menuType != 2" label="路由路径:" prop="menuUrl">
        <el-input v-model="form.menuUrl" type="text" placeholder="请输入内容"> </el-input>
      </el-form-item>
      <el-form-item v-if="form.menuType != 2" label="路由组件:" prop="menuComponent">
        <el-input v-model="form.menuComponent" type="text" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item v-if="form.menuType != 2" label="">
        <el-check-tag v-for="comp in componentsOptions" :key="comp.value" style="margin-right: 10px" type="info" @click="handleTagClick(comp.value)">
          {{ comp.label }}
        </el-check-tag>
      </el-form-item>
      <el-form-item v-if="form.menuType != 2" label="icon图标:" prop="menuIcon">
        <el-input v-model="form.menuIcon" type="text" placeholder="请输入内容"> </el-input>
      </el-form-item>
      <!-- <el-form-item v-if="form.menuType === '1'" label="路由重定向:" prop="menuRedirect">
          <el-input v-model="form.menuRedirect" type="text" placeholder="请输入内容"> </el-input>
        </el-form-item> -->
      <el-form-item label="状态:" prop="useStatus">
        <el-switch v-model="form.useStatus" :active-value="1" :inactive-value="0" />
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.form-wrapper {
  width: 360px;
}
</style>
